<script setup lang="ts">
import { ContentWrap } from '@/components/ContentWrap'
import { useI18n } from '@/hooks/web/useI18n'
import { Table, TableExpose } from '@/components/Table'
import { ReturnList, Exhibition3 } from '@/api/table'
import { TableData } from '@/api/table/types'
import { ref, h, reactive, unref , onMounted} from 'vue'
import { ElTag, ElButton } from 'element-plus'
import { useTable } from '@/views/Order/OrderList'
import { Pagination, TableColumn, TableSlotDefault } from '@/types/table'
import { Form } from '@/components/Form'
import { Search } from '@/components/Search'
import { Dialog } from '@/components/Dialog'

//隐藏的弹窗
const dialogVisible = ref(false)

//查询组件
const schema = reactive<FormSchema[]>([
  {
    field: 'orderNo',
    label: '订单编号：',
    component: 'Input'
  },
  {
    field: 'nickname',
    label: '用户昵称：',
    component: 'Input'
  },
  {
    field: 'productName',
    label: '商品名称：',
    component: 'Input'
  },
  {
    field: 'paymentTime',
    label: '提交时间：',
    component: "DatePicker",
    componentProps: {
      type: 'date',
      format: 'YYYY/MM/DD',
      valueFormat: 'YYYY-MM-DD'
    }
  },
  {
    field: 'orderPaymentChannel',
    label: '支付方式：',
    component: 'Select',
    componentProps: {
      options: [
        {
          label: '微信支付',
          value: '2'
        },
        {
          label: '余额支付',
          value: '3'
        }
        ,
        {
          label: '未支付',
          value: '4'
        },
        {
          label: '支付宝支付',
          value: '5'
        }
      ],
      onChange: (value: string) => {
        console.log(value)
      }
    }
  },
  {
    field: 'orderSource',
    label: '订单来源：',
    component: 'Select',
    componentProps: {
      options: [
        {
          label: '小程序',
          value: '2'
        },
        {
          label: 'App',
          value: '3'
        }
      ],
      onChange: (value: string) => {
        console.log(value)
      }
    }
  },
  {
    field: 'orderStatus',
    label: '订单状态：',
    component: 'Select',
    componentProps: {
      options: [
        {
          label: '退货申请',
          value: '7'
        },
        {
          label: '退货中',
          value: '8'
        },
        {
          label: '已退货',
          value: '9'
        },
        {
          label: '拒绝退货',
          value: '11'
        }
      ],
      onChange: (value: string) => {
        console.log(value)
      }
    }
  }
])
//折叠组件范围
var str = "productName";

const { t } = useI18n();

var JudgingCondition = true;
//表头
const columns = reactive<TableColumn[]>([
  {
    field: '',
    label: '序号',
    type: 'index'
  },
  {
    field: 'order_no',
    label: '订单编号'
  },
  {
    field: 'nickname',
    label: '用户昵称'
  },
  {
    field: 'product_name',
    label: '商品名称'
  },
  {
    field: 'logistics_fee',
    label: '订单金额',
    formatter: (_: Recordable, __: TableColumn, cellValue: number) => {
      return h(
              () =>
                      cellValue == 0 ? "免费" : "￥ " + cellValue
      )
    }
  },
  {
    field: 'order_payment_channel',
    label: '支付方式',
    formatter: (_: Recordable, __: TableColumn, cellValue: number) => {
      return h(
              ElTag,
              {
                type: cellValue === 2 ? 'success' : cellValue === 3 ? 'warning' : cellValue === 4 ? 'danger' : 'primary'
              },
              () =>
                      cellValue === 2
                              ? "微信支付"
                              : cellValue === 3
                              ? "余额支付"
                              : cellValue === 4
                              ? "未支付"
                              : cellValue === 5
                              ? "支付宝支付"
                              : "未知"
      )
    }
  },
  {
    field: 'order_source',
    label: '订单来源',
    formatter: (_: Recordable, __: TableColumn, cellValue: number) => {
      return h(
              ElTag,
              {
                type: cellValue === 2 ? 'success' : cellValue === 3 ? 'warning' : 'danger'
              },
              () =>
                      cellValue === 2
                              ? "小程序"
                              : cellValue === 3
                              ? "app"
                              : "未知"
      )
    }
  },
  {
    field: 'order_status',
    label: '订单状态',
    formatter: (_: Recordable, __: TableColumn, cellValue: number) => {
      return h(
              () =>
                      cellValue === 2
                              ? "待付款"
                              : cellValue === 3
                              ? "已付款"
                              : cellValue === 4
                              ? "待发货"
                              : cellValue === 5
                              ? "已发货"
                              : cellValue === 6
                              ? "已签收"
                              : cellValue === 7
                              ? "退货申请"
                              : cellValue === 8
                              ? "退货中"
                              : cellValue === 9
                              ? "已退货"
                              : cellValue === 10
                              ? "取消交易"
                              : cellValue === 11
                              ? "拒绝退货"
                              : "未知"
      )
    }
  },
  {
    field: 'payment_time',
    label: '提交时间',
    formatter: (_: Recordable, __: TableColumn, cellValue: number) => {
      return h(
              () =>
                      cellValue != null ? cellValue : "N/A"
      )
    }
  },
  {
    field: 'action',
    label: '操作'
  }
])

const { register, tableObject, methods } = useTable<TableData>({
  getListApi: ReturnList,
  response: {
    list: 'list',
    total: 'total'
  },
  props: {
    columns
  },
  defaultParams: {

  }
})

const { getList ,setSearchParams } = methods;

getList()

const tableRef = ref<TableExpose>()

var RowValue = null;
//查看按钮执行的函数
const actionFn = (data: TableSlotDefault) => {
  console.log(data)
  Exhibition3({'orderId':data.row.order_id}).then((res) =>{
    RowValue = res.data[0]
    if (RowValue.freight_amount == undefined) {
      RowValue.freight_amount = 0;
    }else{
      RowValue.freight_amount = Number(RowValue.freight_amount)
    }
    if (RowValue.coupon_price == undefined) {
      RowValue.coupon_price = 0;
    }else{
      RowValue.coupon_price = Number(RowValue.coupon_price)
    }
  })

}

const paginationObj = ref<Pagination>()

const showPagination = (show: boolean) => {
  if (show) {
    var fff = document.querySelector('#fff');
    fff.remove()
    paginationObj.value = {
      total: tableObject.total
    }
  } else {
    paginationObj.value = undefined
  }
}

const reserveIndex = (custom: boolean) => {
  unref(tableRef)?.setProps({
    reserveIndex: custom
  })
}

const showSelections = (show: boolean) => {
  unref(tableRef)?.setProps({
    selection: show
  })
}

const index = ref(1)

const changeTitle = () => {
  unref(tableRef)?.setColumn([
    {
      field: 'title',
      path: 'label',
      value: `${t('tableDemo.title')}${unref(index)}`
    }
  ])
  index.value++
}

const showExpandedRows = (show: boolean) => {
  unref(tableRef)?.setProps({
    expand: show
  })
}

const selectAllNone = () => {
  unref(tableRef)?.elTableRef?.toggleAllSelection()
}

</script>

<template>
<!-- 查询表单 -->
  <ContentWrap :title="`筛选查询`">
    <Search
            :expand="true"
            :expandField=str
            :schema="schema"
            @search="setSearchParams"
            @reset="setSearchParams"
    />
  </ContentWrap>
<!--表格-->
  <ContentWrap :title="`商品订单列表`">
    <Table
      ref="tableRef"
      border="1px"
      v-model:pageSize="tableObject.pageSize"
      v-model:currentPage="tableObject.currentPage"
      :data="tableObject.tableList.slice((tableObject.currentPage-1)*tableObject.pageSize,tableObject.currentPage*tableObject.pageSize)"
      :loading="tableObject.loading"
      :pagination="{total: tableObject.total}"
      @register="register"
    >
      <template #action="data">
        <ElButton type="primary" link size="small" @click="dialogVisible = !dialogVisible;actionFn(data as TableSlotDefault)">
          查看
        </ElButton>
        <ElButton type="primary" link size="small" v-if="data.row.order_status == 7">
          审核
        </ElButton>
      </template>

      <template #expand="data">
        <div class="ml-30px">
          <div>{{ t('tableDemo.title') }}：{{ data.row.title }}</div>
          <div>{{ t('tableDemo.author') }}：{{ data.row.author }}</div>
          <div>{{ t('tableDemo.displayTime') }}：{{ data.row.display_time }}</div>
        </div>
      </template>
    </Table>
  </ContentWrap>
<!-- 查看显示弹窗-->
  <Dialog open-delay="300" v-model="dialogVisible" title="查看">
    <div class="distances">
      <div>基本信息</div>
      <table class="layui-table">
        <tr class="typeface">
          <td>订单编号</td>
          <td>商品名称</td>
          <td>用户账号</td>
          <td>订单状态</td>
          <td>支付方式</td>
          <td>订单来源</td>
        </tr>
        <tr class="details">
          <td>{{RowValue.order_no}}</td>
          <td>{{RowValue.product_name}}</td>
          <td>{{RowValue.account}}</td>
          <td v-if="RowValue.order_status == 2">待付款</td>
          <td v-if="RowValue.order_status == 3">已付款</td>
          <td v-if="RowValue.order_status == 4">待发货</td>
          <td v-if="RowValue.order_status == 5">已发货</td>
          <td v-if="RowValue.order_status == 6">已签收</td>
          <td v-if="RowValue.order_status == 7">退货申请</td>
          <td v-if="RowValue.order_status == 8">退货中</td>
          <td v-if="RowValue.order_status == 9">已退货</td>
          <td v-if="RowValue.order_status == 10">取消交易</td>
          <td v-if="RowValue.order_status == 11">拒绝退货</td>

          <td v-if="RowValue.order_payment_channel == 2">微信支付</td>
          <td v-if="RowValue.order_payment_channel == 3">余额支付</td>
          <td v-if="RowValue.order_payment_channel == 4">未支付</td>
          <td v-if="RowValue.order_payment_channel == 5">支付宝支付</td>

          <td v-if="RowValue.order_source == 2">小程序</td>
          <td v-if="RowValue.order_source == 3">app</td>
        </tr>

        <tr class="typeface">
          <td>订单类型</td>
          <td>配送方式</td>
          <td>物流单号</td>
          <td   id="cancelReason" colSpan = "3"><!--自动确认收货时间--></td>
          <td></td>
        </tr>

        <tr class="details">
          <td v-if="RowValue.order_type == 2">视频</td>
          <td v-if="RowValue.order_type == 3">商品</td>

          <td v-if="RowValue.ensure == 2">包邮</td>
          <td v-if="RowValue.ensure == 3">不包邮</td>

          <td v-if="RowValue.orderLogisticsNumber == undefined">无</td>
          <td v-if="RowValue.orderLogisticsNumber != undefined">{{RowValue.orderLogisticsNumber}}</td>

          <td id="cancelReasons" colSpan = "3"></td>
          <td ></td>
        </tr>

      </table>
    </div>
    <!--收货人信息-->
    <div class="distances">
      <div>收货人信息</div>
      <table class="layui-table">
        <tr class="typeface">
          <td>收货人</td>
          <td>手机号码</td>
          <td>收货地址</td>
        </tr>
        <tr class="details">
          <td id="realName">{{RowValue.real_name}}</td>
          <td  id="phone">{{RowValue.phone}}</td>
          <td>{{RowValue.receivingAddress}}</td>
        </tr>
      </table>
    </div>
    <!--商品信息-->
    <div class="distances">
      <div>商品信息</div>
      <table class="layui-table">
        <tr class="typeface">
          <td>商品图片</td>
          <td>商品名称</td>
          <td>商品编号</td>
          <td>商品价格</td>
          <td>商品数量</td>
          <td>商品类型</td>
          <td>小计</td>
        </tr>
        <tr class="details">
          <td id="mainImage"><img src="RowValue.main_image"></td>
          <td id="productNames">{{RowValue.product_name}}</td>
          <td id="productCode">{{RowValue.product_code}}</td>
          <td id="currentpriceProduct">{{RowValue.currentprice_product}}</td>
          <td id="productCount">{{RowValue.product_count}}</td>
          <td id="categroyName">{{RowValue.categroy_name}}</td>
          <td id="TotalAmount">{{RowValue.product_count * RowValue.currentprice_product}}</td>
        </tr>
      </table>
    </div>
    <!--费用信息-->
    <div class="distances" id="distance">
      <div>费用信息</div>
      <table class="layui-table">
        <tr class="typeface">
          <td>运费金额</td>
          <td>优惠金额</td>
          <td>合计金额</td>
          <td>实付金额</td>
        </tr>
        <tr class="details">
          <td>￥ {{RowValue.freight_amount}}</td>

          <td>￥ {{RowValue.coupon_price}}</td>

          <td>￥ {{RowValue.freight_amount}}</td>

          <td>{{RowValue.freight_amount - RowValue.coupon_price}}</td>
        </tr>
      </table>
    </div>

    <template #footer>
      <ElButton @click="dialogVisible = false">{{ t('dialogDemo.close') }}</ElButton>
    </template>
  </Dialog>
</template>
<style>
  table{
    width: 100%;
  }
  #titles{
    height: 45px;
    background-color: #F3F3F3;
    border: 1px solid #E6E6E6;
  }
  .Order_1{
    background-color:#F3F3F3;
  }
  .Order_1 span{
    line-height:45px;
    margin-left: 10px;
    font-weight:bolder;
  }
  .Order_1 button{
    margin-top: 5px;
    margin-bottom: 5px;
    height: 35px;
    width: 70px;
    line-height: 30px;
    font-size: 10px;
  }
  .Order_1 button .refresh{
    font-size: 12px;
    margin-left: -3px;
  }
  .Order_1 button:hover {
    border-color: #1ABC9C;
    color: #1ABC9C;
  }
  .Order_1 button i:hover {
    color: #1ABC9C;
  }
  #div_ic{
    width: 5px;
    height: 20px;
    background-color: #1ABC9C;
    margin-top: 12px;
  }
  #span_1{
    margin-left: 10px;
    margin-top: -20px;
  }
  #refresh_id{
    margin-left: 10px;
  }
  #back_id{
    margin-left: -10px;
  }
  #modality{
    height: 55px;
    background-color: #F3F3F3;
    border: 1px solid #E6E6E6;
    margin-top: 5px;
  }
  #modify{
    display: none;
    margin-top: 10px;
    margin-bottom: 5px;
    height: 35px;
    width: 120px;
    line-height: 30px;
    font-size: 12px;
    margin-left: 23%;
  }
  #confirm{
    display: none;
    margin-left: 40%;
    margin-top: 10px;
    margin-bottom: 5px;
    height: 35px;
    width: 80px;
    line-height: 30px;
    font-size: 12px;
  }
  #modality button:hover {
    border-color: #1ABC9C;
    color: #1ABC9C;
  }
  #remark{
    margin-left: -45px;
  }
  #modality #pattern{
    margin-top: 15px;
    color: red;
    font-size: 16px;
    margin-left: 40px;
  }

  .distances{
    margin-top: 30px;
  }
  .layui-input{
    border: none;
    outline: none;
    text-align: center;
    height: 54px;
  }
  table{
    text-align: center;
  }
  .layui-table th, .layui-table td {
    position: relative;
    padding: 0px 0px;
    min-height: 20px;
    line-height: 20px;
    font-size: 14px;
  }
  .typeface{
    height: 48px;
    background-color: #F9FAFC;
    font-weight: 600;
  }
  .details{
    height: 55px;
  }
  #mainImage{
    width: 120px;
    height: 120px;
  }
  #TotalAmount{
    width: 170px;
  }
  #realName{
    width:240px;
  }
  #phone{
    width: 360px;
  }
  #distance{
    margin-bottom: 80px;
  }





</style>
